<template>
    <div>
        <nav-bar>
            <template v-slot:default>修改密码</template>
        </nav-bar>
        <div style="margin-top: 50px;padding-top: 40px;">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="old_password"
                        type="password"
                        name="旧密码"
                        label="旧密码"
                        placeholder="旧密码"
                        :rules="[{required: true, message: '请填写旧密码'}]"
                    />
                    <van-field 
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{required: true, message: '请填写密码'}]"
                    />
                    <van-field 
                        v-model="password_confirmation"
                        type="password"
                        name-="确认密码"
                        label="确认密码"
                        :rules="[{required: true, message: '请填写一致密码'}]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="success" native-type="submit">
                        保存修改
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import NavBar from '@/components/common/navbar/NavBar.vue';
    import { reactive,toRefs } from 'vue';
    import { updatePwd } from '@/network/user';
    import { Notify,Toast } from 'vant';
    import { useRouter } from 'vue-router';

    export default {
        name:"UpdatePwd",
        components:{
            NavBar
        },
        setup(){
            const router = useRouter();
            const userinfo = reactive({
                old_password:"",
                password:"",
                password_confirmation:"",
            })
            const onSubmit=()=>{
                console.log('1111');
                //先验证...
                if(userinfo.password!=userinfo.password_confirmation) {
                    Notify({type: 'success', message: '两次密码不一致'})
                    //提交给服务器
                }else{
                    updatePwd(userinfo).then(res=>{
                        console.log(res);
                        if(res.status=='204'){
                            Toast.success('修改成功');
                            setTimeout(()=>{
                                router.go(-1);
                            },1000)
                            userinfo.password_confirmation='';
                            userinfo.password='';
                        }
                    })
                }
            }
            return{
                ...toRefs(userinfo),
                onSubmit,
            }
        }
    }

</script>

<style scoped>
.link-login {
    font-size: 14px;
    margin-bottom: 20px;
    color: #42b983;
}
</style>